// 创建一个路由器并且暴露出去
// 1引入createRouter
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";
import home from "@/views/home.vue"
import about from "@/views/about.vue"
import son from "@/views/son.vue"
import detail from "@/views/detail.vue"
// 创建路由规则
//history模式路径中不带#且跟接近与传统网站   缺点后期项目上线需要服务端配合处理路径问题，否则刷新出现404错误    createWebHistory()
//哈希模式后面带着#  兼容性更好 不需要后端处理路径问题  确定 不太美观  且seo优化较差
// 使用场景  后台项目更加倾向与哈希模式     前台大屏更加倾向于history模式
const router = createRouter({
    history: createWebHistory(),  //暂时不引入哈希模式会报错
    routes: [
        {
            path: "/",
            redirect: "/home"   //设置重定向
        },
        {
            path: "/home",
            component: home
        },
        {
            path: "/about",
            component: about
        },
        // 二级路由
        {
            name: "logson",
            path: "/son",
            component: son,
            children: [{
                path: "detail",  //子集这儿不需要斜杠
                component: detail,
            }]
        },
        // 占位符prams传参,在参数后面添加问号可以设置参数的必要性  可传可不传
        // {
        //     path: "/about/:id/:title?",
        //     component: about
        // },
        // 1占位符prams传参,升级版本,注释：当你再次跳转到该页面时，路由可直接拼接参数，并且可以直接借助defineProps函数接受，这个方法很牛逼（其实这儿有三种写法 这人我没有深入去写）
        {
            path: "/about/:id/:title?",
            component: about,
            props: true
        },
    ]
})
//总结  ：其实路由组件你是没有机会写标签的，更没有机会写组件，因此传递props是没有机会的，哈哈但是你可以借助这个props去玩 共有三种玩法
//路由跳转默认是push,可以前进也可以后退    但是你也可以在RouterLink标签上添加replace,则看完之后浏览器就不让你退回来啦
export default router